<template>
  <div class="userinfo">
    <div class="userinfo-left">
      <el-avatar class="userinfo-avatar" :src="data.avatar"></el-avatar>
    </div>
    <div class="userinfo-right">
      <span style="color:#333;">{{ data.nickname }}</span>
      <span style="color: #999;font-size: 12px;" size="24rpx" color="#999">{{ data.timeAgo }}</span>
    </div>
    <slot></slot>
  </div>
</template>

<script>

export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="less" scoped>
.userinfo {
  display: flex;
  justify-content: left;
  flex-direction: row;

  .userinfo-right {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    margin: auto;
    width: calc(100% - 50px);
  }
}
</style>
